<template>
    <div>
        <div class="container-content">
            <div class="item" v-for="(o, index) in 8" :key="index">
                <!--            调用组件-->
                <card-item :width="width">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                    <div>
                        <span class="time">中华崛起 红旗精神 文字之根</span>
                        <span class="content">. . . 革命传统 . . .</span>
                        <span class="address">安阳红旗渠研学基地</span>
                    </div>
                </card-item>
            </div>
        </div>
<!--        分页-->
        <div class="page">
            <pagination/>
        </div>

    </div>

</template>

<script>
    import CardItem from "@/component/cardItem/CardItem";
    import Pagination from "../../../component/pagination/Pagination";
    export default {
        name: "CourseList",
        components:{
            CardItem,
            Pagination
        },
        data(){
            return {
                width:{width: '240px'}
            }
        }
    }
</script>

<style scoped>

    .page {
        margin-left: 23%;
    }
    .item{
        margin-left: 7%;
        margin-bottom: 3%;
    }
    .container-content {
        margin-top: 4%;
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
    }
    .time {
        font-size: 14px;
        font-weight: 600;
        color: rgba(80, 80, 80, 1);
        padding-top:20px;
        padding-bottom: 10px;
        text-align: center;
    }
    .content{
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: rgba(80, 80, 80, 1);
        margin-bottom: 10px;
    }

    .address{
        font-size: 14px;
        padding-bottom: 10px;
        padding-top: 10px;
        text-align: center;
        border-top: rgba(229, 229, 229, 1) solid 1px;
    }
    .image {
        width: 100%;
        height: 160px;
        display: block;
    }
    span{
        display: block;
    }
</style>